<style>
    .ly-info-label {
        line-height: 21px;
        font-size: 12px;
    }
</style>
<template>
    <div class="ly-info-label" >
        <el-popover
                v-if="tip"
                placement="top-start"
                trigger="hover"
                :content="tip">
            <i class="el-icon-question" slot="reference" style="color: #909399;"></i>
        </el-popover>
        <span class="ly-info-label-label" :style="{'font-size' :labelSize}" v-if="label">{{label}}<span class="ly-info-label-colon">:</span></span>
        <span class="ly-info-label-content" :style="{'font-size' : size, 'color':colorFilter}" > <slot></slot> </span>
    </div>
</template>
<script>
    Rap.define('', '', function () {

        return {
            name: 'ly-info',
            computed:{
                colorFilter:function(){
                    var color=this.color;
                    var colors={'red':'#ff4319','danger':'#ff4319','success':'#67C23A','warning':'#E6A23C'};
                    if(colors[color]){
                        return  colors[color];
                    }
                    return color;
                }
            },
            props: {
                tip: {
                    'default': ''
                },
                label: {
                    'default': ''
                },
                size:{
                    type:String,
                    'default':''
                },//内容字体
                labelSize:{
                    type:String,
                    'default':''
                },//label字体
                color:{
                    type:String
                }
            }, created: function () {
            }, methods: {}
        }
    });
</script>
